<template>
  <div class="p-[20px] bg-white">
    <vxe-grid v-bind="gridOptions">
      <template #operate="scope">
        <el-button type="text" @click="handleEdit(scope.row)">详情</el-button>
        <el-button type="text">完结分账</el-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import PaymentAPI, { PaymentOrderVO } from "@/api/payment";
import { Dict, useDict } from "@/composes/useDict";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";

interface RowVO {
  [key: string]: any;
}

const router = useRouter();

const handleEdit = (row: PaymentOrderVO) => {
  router.push({ name: "PaymentOrderDetail", query: { id: row.id } });
};

const gridOptions = reactive<VxeGridProps<PaymentOrderVO>>({
  showOverflow: true,
  border: true,
  // height: 548,
  align: "center",
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    items: [],
  },
  proxyConfig: {
    form: true,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page, form }) => {
        return PaymentAPI.getOrderList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { title: "支付时间", field: "payTime", minWidth: 160 },
    {
      title: "商家注册名称<br/>商家号",
      type: "html",
      align: "center",
      field: "name",
      minWidth: 160,
      formatter: ["doubleProp", "merchantNo"],
    },
    {
      title: "商家订单号<br/>支付交易流水号",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "tradeNo"],
      field: "orderCode",
      minWidth: 160,
    },
    { title: "支付方式", field: "payTypeName", minWidth: 160 },
    // {
    //   title: "支付通道<br/>终端号",
    //   type: "html",
    //   align: "center",
    //   formatter: ["doubleProp", "nickname"],
    //   field: "username",
    //   minWidth: 180,
    // },
    { title: "结算类型", field: "settleTypeName", minWidth: 160 },
    { title: "交易状态", field: "statusName", minWidth: 160 },
    {
      title: "订单金额<br/>实际支付金额",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "payPrice"],
      field: "orderPrice",
      minWidth: 160,
    },
    {
      title: "总分账金额<br/>剩余可分账金额",
      type: "html",
      align: "center",
      formatter: ["doubleProp", "subSeparatePrice"],
      field: "totalSeparatePrice",
      minWidth: 160,
    },
    { title: "订单标题", field: "title", minWidth: 160 },
    { title: "订单类型", field: "orderTypeName", minWidth: 160 },
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      slots: { default: "operate" },
      minWidth: 300,
    },
  ],
});

const initFormConfig = (dicts: Dict) => {
  if (gridOptions.formConfig) {
    gridOptions.formConfig.items = [
      // 商家名称
      {
        field: "name",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家名称",
          },
        },
      },
      {
        field: "storeCode",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "商家编号",
          },
        },
      },
      {
        field: "orderCode",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "订单号",
          },
        },
      },
      {
        field: "tradeNo",
        title: "",
        span: 8,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "支付单号",
          },
        },
      },
      {
        field: "payType",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: dicts.allPaTypesList,
          props: {
            placeholder: "支付方式",
          },
        },
      },
      // {
      //   field: "agentId",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElSelect",
      //     options: [
      //       { label: "女", value: "Women" },
      //       { label: "男", value: "Man" },
      //     ],
      //     props: {
      //       placeholder: "支付通道",
      //     },
      //   },
      // },
      {
        field: "settleType",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: dicts.settleTypesList,
          props: {
            placeholder: "结算类型",
          },
        },
      },
      {
        field: "status",
        title: "",
        span: 8,
        itemRender: {
          name: "ElSelect",
          options: dicts.statusList,
          props: {
            placeholder: "交易状态",
          },
        },
      },

      {
        field: "createdAt",
        title: "",
        span: 8,
        itemRender: {
          name: "ElDatePicker",
          props: {
            type: "daterange",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
          },
        },
      },
      // {
      //   field: "orderType",
      //   title: "",
      //   span: 8,
      //   itemRender: {
      //     name: "ElSelect",
      //     options: [
      //       { label: "女", value: "Women" },
      //       { label: "男", value: "Man" },
      //     ],
      //     props: {
      //       placeholder: "订单类型",
      //     },
      //   },
      // },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          options: [{ type: "submit", content: "搜索", status: "primary" }],
        },
      },
    ];
  }
};

useDict((dict) => {
  initFormConfig(dict);
});
</script>
